<template>
  <div>
    <v-dialog v-model="downLoading" hide-overlay persistent width="300">
      <v-card color="primary" dark>
        <v-card-text>
          <div class="text-center py-5">下载中...</div>
          <v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
        </v-card-text>
        <v-card-actions>
          <div class="text-right">
            <v-btn small text @click="() => (downLoading = false)">关闭提示</v-btn>
          </div>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="nactiveDownDialog" hide-overlay persistent width="300">
      <v-card color="primary" dark>
        <v-card-text>
          <div class="text-center py-5">文件下载中，请注意浏览器反馈的下载成功提示</div>
        </v-card-text>
        <v-card-actions>
          <div class="text-right">
            <v-btn small text @click="() => (nactiveDownDialog = false)">关闭提示</v-btn>
          </div>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-btn :loading="downLoading" aria-label="下载音频" icon color="primary" @click="onDownload" variant="text">
      <j-icon :color="iconColor" size="20">mdi-download</j-icon>
    </v-btn>
  </div>
</template>

<script>
import axios from "axios";
import { isWeiXin } from "@/utils/common";

export default {
  name: "DownMusic",
  props: {
    url: {
      type: String,
      default: "",
    },
    musicName: {
      type: String,
      default: "",
    },
    iconColor: {
      type: String,
      default: "rgb(var(--v-theme-icon))",
    },
  },
  data() {
    return {
      show: true,
      downLoading: false,
      nactiveDownDialog: false,
    };
  },
  methods: {
    onDownload() {
      if (isWeiXin()) {
        alert("请使用谷歌或火狐浏览器下载");
        return;
      }
      if (this.url !== "") {
        this.downLoading = true;
        axios({
          method: "get",
          url: `${this.url}?down=1`,
          responseType: "blob",
        })
          .then((response) => {
            this.downLoading = false;
            this.download(response); // then直接下载，方法在下边
          })
          .catch((err) => {
            console.log("err-->", err);
            console.log("加载资源失败");
            this.downLoading = false;
            this.$nextTick(() => {
              this.nactiveDownDialog = true;
            });
            this.createLink(`${this.url}?down=1`);
          });
      }
    },
    download(res) {
      const blob = new Blob([res.data], { type: res.data.type }); // type是文件类，详情可以参阅blob文件类型
      // 创建新的URL并指向File对象或者Blob对象的地址
      const blobURL = window.URL.createObjectURL(blob);
      // 创建a标签，用于跳转至下载链接
      const tempLink = document.createElement("a");
      tempLink.style.display = "none";
      tempLink.href = blobURL;
      tempLink.setAttribute("download", `${this.musicName}.mp3`);
      // 兼容：某些浏览器不支持HTML5的download属性
      if (typeof tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      // 挂载a标签
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
      // 释放blob URL地址
      window.URL.revokeObjectURL(blobURL);
    },
    createLink(url) {
      // 创建a标签，用于跳转至下载链接
      const tempLink = document.createElement("a");
      tempLink.style.display = "none";
      tempLink.href = url;
      tempLink.setAttribute("download", `${this.musicName}.mp3`);
      // 兼容：某些浏览器不支持HTML5的download属性
      if (typeof tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      // 挂载a标签
      document.body.appendChild(tempLink);
      tempLink.click();
    },
  },
};
</script>

<style>
.wxts {
  position: absolute;
  top: -20px;
}
.alert {
  position: absolute;
  top: 0px;
}
</style>
